<template>
	<div :class="['detegation-card', isSysAdmin ? 'isSysAdmin' : '']">
		<div class="detegation-empty" v-if="information.length == 0">
			<a-empty />
		</div>
		<a-radio-group v-model:value="value1" size="large">
			<a-radio-button
				v-for="(item, index) in information"
				:key="index"
				:value="item"
				style="height: 152px; width: 320px"
			>
				<div class="detegation-cardinfo">
					<!-- 状态 -->
					<div
						v-if="
							item.status == '0' &&
							historyStatus !== 'history_dataset_associations'
						"
						class="cards-title"
					>
						<div class="card_status-draft card-custom">
							<EllipsisTooltip :title="$t('delegate.draft', '草稿')" />
						</div>
						<a-dropdown placement="bottomRight">
							<a class="ant-dropdown-link" @click.prevent> ... </a>
							<template #overlay>
								<a-menu>
									<a-menu-item @click="onClick('1', item)">{{
										$t('delegate.edit', '修改')
									}}</a-menu-item>
									<a-menu-item @click="onClick('2', item)">{{
										$t('delegate.delete', '删除')
									}}</a-menu-item>
								</a-menu>
							</template>
						</a-dropdown>
					</div>
					<div
						v-if="
							item.status == '0' &&
							historyStatus === 'history_dataset_associations'
						"
						class="cards-title"
					>
						<div class="card_status-draft-delete card-custom">
							<EllipsisTooltip
								:title="$t('delegate.hasDeletedDraft', '已删除草稿')"
							/>
						</div>
					</div>
					<div v-if="item.status == '1'" class="cards-title">
						<div class="card_status-effect card-custom">
							<EllipsisTooltip :title="$t('delegate.Using', '生效中')" />
						</div>
						<a-dropdown placement="bottomRight">
							<a class="ant-dropdown-link" @click.prevent> ... </a>
							<template #overlay>
								<a-menu>
									<a-menu-item @click="onClick('1', item)">{{
										$t('delegate.edit', '修改')
									}}</a-menu-item>
									<a-menu-item @click="onClick('2', item)">{{
										$t('delegate.delete', '删除')
									}}</a-menu-item>
								</a-menu>
							</template>
						</a-dropdown>
					</div>
					<div
						v-if="
							item.status == '2' &&
							historyStatus !== 'history_dataset_associations'
						"
						class="cards-title"
					>
						<div class="card_status-effective card-custom">
							<EllipsisTooltip :title="$t('delegate.noEffect', '待生效')" />
						</div>
						<a-dropdown placement="bottomRight">
							<a class="ant-dropdown-link" @click.prevent> ... </a>
							<template #overlay>
								<a-menu>
									<a-menu-item @click="onClick('1', item)">{{
										$t('delegate.edit', '修改')
									}}</a-menu-item>
									<a-menu-item @click="onClick('2', item)">{{
										$t('delegate.delete', '删除')
									}}</a-menu-item>
								</a-menu>
							</template>
						</a-dropdown>
					</div>
					<div v-if="item.status == '3'" class="cards-title">
						<div class="card-status-delete card-custom">
							<EllipsisTooltip
								:title="$t('delegate.hasDeletedDelegate', '已删除委托')"
							/>
						</div>
					</div>
					<div
						v-if="
							item.status == '2' &&
							historyStatus === 'history_dataset_associations'
						"
						class="cards-title"
					>
						<div class="card_status-complete card-custom">
							<EllipsisTooltip :title="$t('delegate.hasFinished', '已完成')" />
						</div>
					</div>
					<!-- 申请人信息 -->
					<div class="card-capacity">
						<div class="agent-info">
							<ok-person-cell
								width="36px"
								height="36px"
								.personInfo="item.agent_info"
								avatarIconInfo="{
									rightTopIcon: {
										isShowIcon: true,
										currentIcon: 'proxy'
									}
								}"
							></ok-person-cell>
							<span class="card-capacity-name">
								{{ item.agent_info.employee_name }}
							</span>
						</div>
						<div class="other-info">
							<div class="creator">
								<span class="label">{{
									$t('informationPortal.creator', '创建人')
								}}</span>
								<span>{{ item?.operator?.employee_name }}</span>
							</div>
							<div class="time">
								<span class="label">{{
									$t('delegate.runTime', '生效时间')
								}}</span>
								<span class="card-capacity-date">
									{{ moment(item.start_date).format('MM-DD HH:mm') }}
									{{ $t('delegate.to', '至') }}
									{{ moment(item.end_date).format('MM-DD HH:mm') }}
								</span>
							</div>
						</div>
					</div>
				</div>
			</a-radio-button>
		</a-radio-group>
	</div>
</template>

<script lang="ts">
import { reactive, ref, watch, createVNode } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'
import { apiInit } from '@/services' //引入接口
import { useRouter } from 'vue-router'
import moment from 'moment'
import { i18n } from '@/locales'
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'
import { useStore } from 'vuex'

const { $t } = i18n

interface MenuInfo {
	key: string
	id: any
}
const value1 = ref<string>('')
const value2 = ref<string>('a')

export default {
	name: '',
	props: {
		information: {
			type: Array,
			default: () => [],
		},
	},
	components: {
		EllipsisTooltip,
	},

	setup(props: any, ctx: any) {
		const api = apiInit()
		const router = useRouter()

		const historyStatus: any = ref('')
		const variableName = router.currentRoute.value.name
		const store = useStore()
		const isSysAdmin = store.state.userInfo.sys_admin
		historyStatus.value = variableName

		const menuClick = (menuName: any) => {
			ctx.emit('cardClick', menuName)
		}
		watch(
			() => value1.value,
			(cur, old) => {
				menuClick(cur)
			}
		)
		watch(
			() => props.information,
			(cur, old) => {
				const arraydata: any = cur[0]
				value1.value = arraydata
			}
		)

		const onClick = async (key: any, item: any) => {
			if (key === '1') {
				router.push({
					name: 'add_delegation',
					query: {
						id: item.id,
						send_msg: item.send_msg,
						consigner_id: store.state.userInfo.employee_id,
						employee_id: item.agent_info.employee_id,
						start_date: moment(item.start_date).format('YYYY-MM-DD HH:mm'),
						end_date: moment(item.end_date).format('YYYY-MM-DD HH:mm'),
						status: item.status,
						start_dept_id: item.start_dept
							? JSON.stringify(
									item.start_dept.map((item: any) => item.department_id)
							  )
							: undefined,
						has_child: item.has_child,
						from: 'creat_byme',
					},
				})
			} else if (key === '2') {
				famBellDelete(item.id)
			}
		}
		const famBellDelete = (id: any) => {
			Modal.confirm({
				icon: createVNode(ExclamationCircleOutlined),
				content: $t('delegate.deleteTip', '确认删除此委托？'),
				okText: $t('personalCenter.confirm', '确认'),
				cancelText: $t('personalCenter.cancel', '取消'),
				onOk() {
					return new Promise((resolve, reject) => {
						setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
						famBellDeleteApi(id)
					}).catch(() => console.log('Oops errors!'))
				},
			})
		}
		const famBellDeleteApi = async (id: any) => {
			const { data, code } =
				await api.delegateAuto.DeleteDelegatePrivateV3Ego_apiPOST({
					payload: { id },
				})
			if (code === '000000') {
				ctx.emit('currentListenerList', '')
			}
		}
		return {
			historyStatus,
			onClick,
			value1,
			menuClick,
			famBellDelete,
			famBellDeleteApi,
			moment,
			value2,
			isSysAdmin,
		}
	},
}
</script>

<style lang="less" scoped>
.detegation-card {
	width: 340px;
	height: calc(100vh - 150px);
	overflow-x: hidden;
	overflow-y: auto;
	&.isSysAdmin {
		height: calc(100vh - 190px);
	}
}
.detegation-empty {
	width: 320px;
	height: 152px;
	background: @rok-white-color;
	border-radius: 6px;
	padding-top: 10px;
}
.ant-radio-button-wrapper-checked {
	.detegation-cardinfo {
		border: 1px solid @rok-primary-color;
	}
}

.detegation-cardinfo {
	width: 320px;
	height: 152px;
	padding-top: 8px;
	border-radius: 6px;
	.cards-title {
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;
		padding-right: @rok-font-size-base;
		.ant-dropdown-link {
			position: absolute;
			top: 0;
			right: 12px;
			font-size: 20px;
			color: #2B2F36;
			font-weight: 600;
		}
	}
	.card-custom {
		min-width: 48px;
		max-width: 124px;
		height: 26px;
		padding: 0 10px;
		border-radius: 0px 4px 4px 0px;
		font-size: @rok-font-size-base;
		line-height: 26px;
		text-align: center;
	}
	.card_status-effective {
		background: rgba(255, 152, 1, 0.1);
		color: @rok-warning-color;
		border-left: 3px solid @rok-warning-color;
	}
	.card_status-effect {
		background: rgba(76, 120, 252, 0.1);
		color: #4c78fc;
		border-left: 3px solid #4c78fc;
	}
	.card_status-draft {
		background: rgba(100, 106, 115, 0.1);
		color: @rok-auxiliary-color;
		border-left: 3px solid @rok-text-color-secondary;
	}
	.card_status-draft-delete {
		background: rgba(100, 106, 115, 0.1);
		color: @rok-auxiliary-color;
		border-left: 3px solid @rok-text-color-secondary;
	}
	.card-status-delete {
		background: rgba(143, 149, 158, 0.1);
		border-radius: 0px 4px 4px 0px;
		color: @rok-auxiliary-color;
		border-left: 3px solid @rok-text-color-secondary;
	}
	.card_status-complete {
		background: rgba(90, 187, 60, 0.1);
		border-radius: 0px 4px 4px 0px;
		color: @rok-success-color;
		border-left: 3px solid @rok-success-color;
	}

	.card-capacity {
		display: flex;
		height: 100px;
		.agent-info {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-right: 1px dashed #e8eaed;
			width: 100px;
			flex-shrink: 0;
			margin-right: 20px;
		}
		.other-info {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			& > div {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				&:first-child {
					margin-bottom: 20px;
				}
			}
			.creator {
				color: @rok-text-color;
			}
		}
		.label {
			font-size: 12px;
			color: #8f959e;
			line-height: 12px;
		}
		.card-capacity-name {
			font-weight: 500;
			color: @rok-text-color;
		}
		.card-capacity-mailbox {
			font-size: @rok-font-size-base;
			color: @rok-text-color-secondary;
		}
		.card-capacity-date {
			font-size: @rok-font-size-base;
			color: @rok-text-color;
		}
	}
}
.ant-radio-group-large .ant-radio-button-wrapper {
	height: 40px;
	font-size: @rok-font-size-base;
	line-height: 27px;
}
.ant-radio-button-wrapper {
	padding: 0 0px;
	margin-bottom: 20px;
	border-radius: 6px;
}

.ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
	border-radius: 6px;
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
	z-index: 1;
	color: none;
	background: #fff;
	border-color: #fff;
}
.ant-radio-button-wrapper:focus-within {
	box-shadow: 0 0 0 3px rgba(34, 69, 133, 0);
}

.ant-radio-button-wrapper {
	border: 0px solid #dee0e3;
}
</style>
